// ========================================================
// bar 工具栏UI生成器
// ========================================================

// 用于生成 工具栏 样式
@mixin bar-style($name, $bg-color, $border-color, $color) {
    // $name: 主题的名称
    // $ba-color: 背景色
    // $border-color: 边框色
    // $color: 内容的字体颜色
    &.bar-#{$name} {
        color: $color;
        background-color: $bg-color;
        background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);

        .title {
            color: $color;
        }

        &.bar-footer {
            background-image: linear-gradient(180deg, $border-color, $border-color 50%, transparent 50%);
        }

        @include retina-border-color($border-color);

        .button {
            color: $color;
        }
    }
}


@mixin bar($styles: stable positive ) {
    position: relative;
    z-index: $z-index-bar;

    overflow: hidden;
    color: $bar-default-text;

    padding: rem($bar-padding-portrait);
    text-align: center;
    height: rem($bar-height);
    background-size: 0;
    background-color: $bar-default-bg;

    display: flex;
    width: 100%;
    user-select: none;
    border-width: 0;
    @include retina-border(bottom, $bar-default-border);

    .title {
        position: absolute;
        padding: 0 rem($bar-button-padding);
        max-width: 80%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        margin: 0 auto;
        line-height: rem($bar-height - $bar-padding-portrait * 2);
        font-size: rem($bar-title-font-size);
        z-index: $z-index-bar-title;
        
        @include text-ellipsis;
        
        &.title-left {
            margin-left: 0;
        }
    }

    .button {
        color: $bar-default-text;
        font-size: rem($bar-title-font-size);
        line-height: rem($bar-button-height);
        
        z-index: $z-index-bar-button;
        @include vertical-align-center;

        min-height: rem($bar-button-height);
        padding: 0 rem($bar-button-padding);

        &:first-child, &:last-child {
            position: absolute;
        }

        &:first-child {
            left: rem($bar-padding-portrait);
        }

        &:last-child {
            right: rem($bar-padding-portrait);
        }
        
        &:after {
            height: rem($bar-height);
            top: rem(-($button-padding / 2 + 1));
        }
    
        &:before,
        .icon:before {
            font-size: rem($bar-button-icon-size);
            line-height: rem($bar-button-height);
        }
        
        &.button-clear:before {
            padding: 0;
            font-size: rem($bar-button-icon-clear-size);
        }
    }

    @each $style in $styles {
        @if $style == stable {
            @include bar-style($style,
            $bar-stable-bg, $bar-stable-border, $bar-stable-text);
        }

        @if $style == positive {
            @include bar-style($style,
            $bar-positive-bg, $bar-positive-border, $bar-positive-text);
        }
    }

    @at-root {
        .bar-header {
            top: 0;

            & + .content {
                top: rem($bar-height);
            }
        }

        .bar-footer {
            bottom: 0;
            height: rem($bar-foot-height);
            line-height: rem($bar-foot-height);
            position: absolute;

            background-position: top;

            @include retina-border-width(top);
            @include retina-border-width(bottom, 0);

            .button {
                line-height: rem($bar-button-foot-height);
                min-height: rem($bar-button-foot-height);

                &:after {
                    height: rem($bar-foot-height);
                }
            }
        }
    }

    &.inline {
        padding: $bar-padding-portrait;

        .button {
            min-height: rem($bar-height - $bar-padding-portrait * 2 - 2);
            line-height: rem($bar-height - $bar-padding-portrait * 2 - 2);
        }
    }
}
